$(function () {
  // alert(444);

  let cPage = 1;
  // 1.0 获取所有文章分类，渲染到所有分类中
  $.ajax({
    method: "GET",
    url: BigNew.category_list,
    success: (res) => {
      // console.log(res);
      const htmlStr = template("cateItem", { list: res.data });
      $("#selCategory").html(htmlStr);
    },
  });

  getArticleList();
  // 2.0 文章列表查询 - 文章搜索数据 渲染到tbody
  function getArticleList() {
    // 获取下拉框的值
    const type = $("#selCategory").val();
    const state = $("#selStatus").val();
    // console.log(type, state);
    $.ajax({
      method: "GET",
      url: BigNew.article_query,
      data: {
        key: "", // 搜索关键词，为空返回某类型所有文章
        type: type, // 文章类型 id
        state: state, // 文章状态，两种状态：草稿、已发布，为空返回所有状态的文章
        page: cPage, //当前页，页码
        perpage: 10, //每页显示的条数，页容量
      },
      success: (res) => {
        // console.log(res);
        const htmlStr = template("queryItem", { list: res.data.data });
        $(".table tbody").html(htmlStr);

        // 调用分页插件，传参，第一个是当前页的页码，第二个是总页数
        setPage(cPage, res.data.totalPage);
      },
    });
  }

  // 3.0 筛选功能
  $("#btnSearch").click(function (e) {
    e.preventDefault();
    // 获取下拉框的值
    /* const type = $("#selCategory").val();
    const state = $("#selStatus").val();
    console.log(type, state); */

    // 筛选条件发生改变时，页码重新初始化
    cPage = 1;
    // 调用文章搜索函数，把筛选出来的数据重新渲染
    getArticleList();
  });

  // 点击分页插件页码：ajax请求对应分页数据
  /**
   * @param pageCurrent 当前所在页
   * @param pageSum 总页数
   * @param callback 调用ajax
   */
  function setPage(pageCurrent, pageSum, callback) {
    $(".pagination").bootstrapPaginator({
      //设置版本号
      bootstrapMajorVersion: 3,
      // 显示第几页
      currentPage: pageCurrent,
      // 总页数
      totalPages: pageSum,
      //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
      onPageClicked: function (event, originalEvent, type, page) {
        // 把当前点击的页码赋值给cPage, 调用ajax,渲染页面
        cPage = page;
        // 根据新的分页数据重新发送 ajax 请求
        getArticleList && getArticleList();
      },
    });
  }

  // 删除文章列表
  $("tbody").on("click", ".delete", function () {
    // 获取当前按钮的id
    const id = $(this).attr("data-id");
    // console.log(id);

    // ajax请求 删除数据
    $.ajax({
      method: "POST",
      url: BigNew.article_delete,
      data: { id },
      success: (res) => {
        console.log(res);
        // 重新获取文章列表
        getArticleList();
      },
    });
  });
});
